<template>
  <div class="car-info">
    <el-card>
      <h2>车辆信息管理</h2>
      <el-table :data="cars" style="width:100%">
        <el-table-column prop="carId" label="车辆ID" />
        <el-table-column prop="carNumber" label="车牌号" />
        <el-table-column prop="carType" label="车型" />
        <el-table-column prop="carBrand" label="品牌" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="onDelete(scope.row.carId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="onAdd">添加车辆</el-button>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      <el-form :model="form" label-width="80px">
        <el-form-item label="车牌号">
          <el-input v-model="form.carNumber" />
        </el-form-item>
        <el-form-item label="车型">
          <el-input v-model="form.carType" />
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="form.carBrand" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </el-dialog>
    <el-alert v-if="msg" :title="msg" type="success" show-icon style="margin-top:10px;" />
  </div>
</template>

<script>
import api from '@/api';
export default {
  data() {
    return {
      cars: [],
      dialogVisible: false,
      dialogTitle: '添加车辆',
      form: { carId: '', carNumber: '', carType: '', carBrand: '' },
      editMode: false,
      msg: '',
      loading: false
    };
  },
  async created() {
    await this.fetchCars();
  },
  methods: {
    async fetchCars() {
      this.loading = true;
      try {
        this.cars = await api.get('/car/list');
      } catch (e) {
        this.msg = '获取车辆信息失败';
      }
      this.loading = false;
    },
    onAdd() {
      this.dialogTitle = '添加车辆';
      this.form = { carId: '', carNumber: '', carType: '', carBrand: '' };
      this.editMode = false;
      this.dialogVisible = true;
    },
    onEdit(car) {
      this.dialogTitle = '编辑车辆';
      this.form = { ...car };
      this.editMode = true;
      this.dialogVisible = true;
    },
    async onSave() {
      this.loading = true;
      try {
        if (this.editMode) {
          await api.post('/car/update', this.form);
        } else {
          await api.post('/car/add', this.form);
        }
        this.dialogVisible = false;
        await this.fetchCars();
        this.msg = '操作成功';
      } catch (e) {
        this.msg = '操作失败';
      }
      this.loading = false;
    },
    async onDelete(id) {
      this.loading = true;
      try {
        await api.post('/car/delete', { carId: id });
        await this.fetchCars();
        this.msg = '删除成功';
      } catch (e) {
        this.msg = '删除失败';
      }
      this.loading = false;
    }
  }
};
</script>

<style scoped>
.car-info { max-width: 800px; margin: 40px auto; }
</style>
